<!-- sku选择 -->
<template>
  <el-dialog title="选择规格" :visible.sync="showSelectPop">
    <el-form :model="tempGoodsDetail" size="medium" ref="tempGoodsDetailForm" label-width="0px">
      <el-table v-if="tempGoodsDetail.goodsAttr" :data="tempGoodsDetail.goodsAttr" highlight-current-row border>
        <el-table-column align="center" width="50">
          <template slot-scope="scope">
            <label class="input-checkbox" v-if="multiple">
              <input type="checkbox" :value="scope.row" v-model="tempGoodsSelect"/>
              <span></span>
            </label>
            <label class="input-radio" v-else>
              <input type="radio" :value="scope.row" v-model="tempGoodsSelect"/>
              <span></span>
            </label>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品">
          <template>
            {{tempGoodsDetail.goods.name}}
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in attrList"
          v-show="tempGoodsDetail.goodsAttr[0][item.prop]" :key="index" align="center" :label="'属性值'+(index+1)" :prop="item.prop"
          min-width="100px">
        </el-table-column>
        <el-table-column align="center" label="库存数" min-width="90px">
          <template slot-scope="$scope">
            可分配：{{$scope.row.totalSkuNumber}}<br />
            <span v-if="!($scope.row.totalSkuNumber+($scope.row.distributedSkuNumber||0))" style="color: red">库存不足</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selectGoodsSku" :loading="btnLoading">确定</el-button>
      <el-button @click="showSelectPop = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props:{
      id:{
        type:[String, Number]
      },
      //是否多选
      multiple:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        //属性列表
        attrList:[
          {id:'attrId1', prop: 'attrValue1'},
          {id:'attrId2', prop: 'attrValue2'},
          {id:'attrId3', prop: 'attrValue3'},
          {id:'attrId4', prop: 'attrValue4'},
          {id:'attrId5', prop: 'attrValue5'},
          {id:'attrId6', prop: 'attrValue6'}
        ],
        showSelectPop: false,
        tempGoodsDetail: {},
        btnLoading: false,
        tempGoodsSelect: '', //选择的sku
      }
    },
    mounted() {
      this.getTable(this.id);
      if(this.multiple){
        this.tempGoodsSelect=[];
      }else{
        this.tempGoodsSelect='';
      }
    },
    methods: {
      getTable(id){
        if(!id){return}
        this.request({
          url: '/bsnl-product/goods/details',
          method: 'get',
          params: {
            id: id
          }
        }).then(({ data }) => {
          data.goodsAttr.map(item => {
            item.skuNumber = 1;
            item.number = 1;
            item.goods = data.goods;
            item.serialNo = data.goods.serialNo;
          })
          this.tempGoodsDetail = data
          this.showSelectPop = true
        })
      },
      selectGoodsSku() {
        if((this.multiple&&!this.tempGoodsSelect.length>0)||(!this.multiple&&(this.tempGoodsSelect===''||this.tempGoodsSelect===null||this.tempGoodsSelect===undefined))){
          this.$message.warning('请选择规格')
          return false
        }
        // if (!this.multiple&&this.tempGoodsDetail.goodsAttr[this.tempGoodsSelect].totalSkuNumber < 1 ) {
        //   this.$message.warning('库存不足，请选择其他商品')
        //   return false
        // }
        if (!Array.isArray(this.tempGoodsSelect)) {
          this.tempGoodsSelect = [this.tempGoodsSelect];
        }
        this.showSelectPop = false;
        this.$emit("choose", this.tempGoodsSelect);
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
